<script setup lang="ts">
  import { computed } from 'vue'
  import type { Category } from '@/types/api'

  interface Props {
    categories: Category[]
  }

  const props = defineProps<Props>()

  const emit = defineEmits<{
    'category-click': [categoryId: string]
  }>()

  // 处理分类的颜色和样式
  const processedCategories = computed(() => {
    if (!props.categories.length) return []

    return props.categories.map(category => ({
      ...category,
      // 直接使用后端返回的颜色值，如果没有设置则使用默认颜色
      color: category.color || '#409EFF',
      // 使用后端返回的真实count数据
      count: category.count || 0,
      icon: getCategoryIcon(category.name),
    }))
  })

  // 根据分类名称获取图标
  const getCategoryIcon = (categoryName: string): string => {
    const iconMap: { [key: string]: string } = {
      'Vue.js': '🟢',
      Vue: '🟢',
      JavaScript: '🟨',
      TypeScript: '🔷',
      React: '⚛️',
      CSS: '🎨',
      HTML: '📄',
      'Node.js': '🟩',
      Java: '☕',
      Spring: '🍃',
      Python: '🐍',
      Docker: '🐳',
      MySQL: '🐬',
      Redis: '🔴',
      Linux: '🐧',
      前端: '🎨',
      后端: '⚡',
      数据库: '💾',
      运维: '🔧',
    }

    return iconMap[categoryName] || '📁'
  }
  const handleCategoryClick = (categoryId: string) => {
    emit('category-click', categoryId)
  }
</script>

<template>
  <div class="popular-categories">
    <div v-if="processedCategories.length === 0" class="empty-state">
      <p>暂无分类</p>
    </div>

    <div v-else class="categories-list">
      <div
        v-for="category in processedCategories"
        :key="category.id"
        class="category-item"
        :style="{ '--category-color': category.color }"
        @click="handleCategoryClick(category.id)"
      >
        <div class="category-icon">
          <span class="icon">{{ category.icon }}</span>
        </div>
        <div class="category-content">
          <span class="category-name">{{ category.name }}</span>
          <span class="category-count">{{ category.count }} 篇</span>
        </div>
        <div class="category-arrow">→</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .popular-categories {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
  }

  .empty-state {
    text-align: center;
    color: var(--text-secondary);

    p {
      margin: 0;
      font-size: 0.9rem;
    }
  }

  .categories-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .category-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;

    &:hover {
      background: var(--bg-secondary);
      border-color: var(--category-color);
      transform: translateX(4px);
      box-shadow: var(--shadow-sm);

      .category-icon {
        transform: scale(1.1);
      }

      .category-arrow {
        color: var(--category-color);
        transform: translateX(4px);
      }
    }
  }

  .category-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--category-color), var(--category-color));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--category-color);
      border-radius: 50%;
      opacity: 0.1;
    }

    .icon {
      font-size: 1rem;
      position: relative;
      z-index: 1;
    }
  }

  .category-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }

  .category-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .category-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1;
  }

  .category-arrow {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .popular-categories {
      padding: 1rem;
    }

    .categories-list {
      gap: 0.5rem;
    }

    .category-item {
      padding: 0.6rem;
    }

    .category-icon {
      width: 28px;
      height: 28px;

      .icon {
        font-size: 0.9rem;
      }
    }

    .category-name {
      font-size: 0.85rem;
    }

    .category-count {
      font-size: 0.7rem;
    }
  }

  @media (max-width: 480px) {
    .category-item {
      padding: 0.5rem;
      gap: 0.6rem;
    }

    .category-icon {
      width: 26px;
      height: 26px;

      .icon {
        font-size: 0.8rem;
      }
    }
  }
</style>
